<script lang="ts" setup>
import { ref, watch } from 'vue';
import axios from 'axios'
import { IResponse, IArticleItem } from '../types';
import { useChannelStore } from '../store/channel'
import { storeToRefs } from 'pinia';
const channelStore = useChannelStore()
const { channelId } = storeToRefs(channelStore)

const articleList = ref<IArticleItem[]>([])

watch(channelId, async (newChannelId) => {
  const r = await axios.get<IResponse<{ results: IArticleItem[] }>>(`http://geek.itheima.net/v1_0/articles?channel_id=${newChannelId}&timestamp=${Date.now()}`)
  articleList.value = r.data.data.results
}, {
  immediate: true
})

</script>

<template>
  <div className="list">
    <div className="article_item" v-for="item in articleList" :key="item.art_id">
      <h3 className="van-ellipsis">{{ item.title }}</h3>
      <!-- <div className="img_box" v-if="item.cover.type > 0">
          <img :src="item.cover.images![0]" className="w100" alt="" />
        </div> -->
      <div className="img_box" v-if="item.cover.images">
        <img :src="item.cover.images[0]" className="w100" alt="" />
      </div>
      <div className="info_box">
        <span>{{ item.aut_id }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>

<style scoed lang="less"></style>